<template>
    <div class="comment-wrapper  slideup">

        <div class="comment-header">
            <i class="iconfont icon-pinglun1"></i>
            评论
        </div>

        <!-- 主评论表情输入框 -->
        <emoji-text ref="mainCommentRef" @comment="comment" :emojiSize="20" :avatarUrl="userInfo.avatar"></emoji-text>

        <!-- 此处为渲染 评论列表, (所有的一级评论渲染列表) -->
        <!-- 还有一个比较麻烦的一点：每个一级评论的最下面都有一个评论输入框，
                                                       当点击这个一级评论的回复或者这个一级评论的任一子评论的回复时，
                                                       应当把其它一级评论下的输入框给隐藏掉。
                                 因此, 必须要能拿到所有的Reply, 并且需要知道哪个不关闭(其它的都要关掉), 所以用ref和标记index解决
                                 所以, 只能在父组件中收集所有的Reply, 然后子组件告诉父组件如何操作。
                                 在风宇博客中, 他是直接通过$ref拿到所有的子组件后, 通过子组件的$el属性, 通过修改$el属性的display来隐藏元素的 -->
        <!-- 把当前主评论的id给到子组件的parentId属性 -->
        <Reply ref="commentReplyRef" @closeOtherCommentBoxExcept="closeOtherCommentBoxExcept" :commentId="reply.id"
            v-for="reply in replyList" :key="reply.id" :reply="reply" :topicId="topicId"/>

        <div class="loading-area">
            <!-- hasMore->{{ hasMore }} <br/> -->
            <!-- isLoading->{{ isLoading }} -->
            <div class="loading-effect" v-show="hasMore">
                <div class="loading-text" v-show="!isLoading" ref="loadingTextRef">
                    正在加载中{{ 'isLoading=' + isLoading }} - {{ 'hasMore=' + hasMore }}
                </div>
                <div class="loading-animation" v-show="isLoading">
                    <Loading />
                </div>
            </div>

            <div class="bottom-line" v-if="this.replyList.length > 5">
                <span>我也是有底线的</span>
            </div>

        </div>
    </div>
</template>

<script>
import { getArticleCommentList, postComment } from '@/api/commentApi';

import EmojiText from '@/components/EmojiText/EmojiText'
import Reply from '@/components/Reply/Reply'
import Loading from '@/components/Loading/Loading'

import { mapState } from 'vuex'


export default {
    name: 'Comment',
    props:{
        topicId:{
            type:Number
        }
    },
    data() {
        return {
            replyList: [],
            // currPage: 0, /* 分页参数, 第几页, 默认第0页 */
            // pageSize: 2,/* 分页参数, 页大小 */
            hasMore: true, /* 是否还有数据可供加载, 默认有数据 */
            isLoading: false, /* 是否加载中 */
            query: {
                currCommentId:null,
                topicId: this.topicId,
                type: 1
            }
        }
    },
    mounted() {

        /* 优化: 上面是还没滚动到评论下面,就去加载; 改成等到了看评论的时候,再去加载。 */
        let observer = new IntersectionObserver(entries => {
            for (let entry of entries) {
                console.log(entry);
                if (entry.isIntersecting) { // 当正在加载的文字出现的时候, 才开始发起请求, 加载数据
                    this.loadCommentList(observer)
                }
            }
        }, { threshold: 0.5 })
        observer.observe(this.$refs['loadingTextRef'])
    },
    methods: {
        loadCommentList(observer) {
            this.isLoading = true // 显示加载动画
            getArticleCommentList(this.query).then(res => {
                this.isLoading = false // 关闭加载动画
                this.replyList.splice(this.replyList.length, 0, ...res) // 将数据添加到最后面, 由vue根据修改后的数据(响应式数据), 更新dom
                this.$nextTick(() => {
                    if (res.length > 0) { // 证明还有数据, 还可以继续加载
                        this.hasMore = true
                        // 记录最后一个评论id
                        this.query.commentId = res[res.length - 1].id
                    } else {
                        this.hasMore = false // 当前页已经是最后一页了, 后面没有更多数据了
                        observer.unobserve(this.$refs['loadingTextRef'])
                    }
                })
            })
        },
        /* 添加评论 */
        comment(content) {
            if(!this.userInfo.id) {
                this.$toast('warn','请先登录')
                return
            }
            if(!content) {
                this.$toast('warn','评论内容不能为空')
                return
            }
            postComment({
                commentContent: content,
                topicId: this.$route.params.articleId,
                type:1
            }).then(res => {
                res.children = [] // 初始化children, 方便添加评论的回复
                this.replyList.splice(0, 0, res)
                this.$refs['mainCommentRef'].clearTextareaContent()
                this.$toast('success', '评论成功')
            })
        },
       
        /* 关闭其它一级评论的评论框 */
        closeOtherCommentBoxExcept(commentId) { // commentId用于标识具体是哪个评论
            /* 根据索引, 关闭其它的输入框, 除了指定的输入框外 */
            this.$refs['commentReplyRef'].forEach(commentReplyRef => {
                if (commentReplyRef.commentId != commentId) {
                    commentReplyRef.hideCommentBox()
                }
            })
        }
    },
    computed:{
        userInfo() {
            return this.$store.state.user.userInfo || {}
        }
    },
    watch: {

    },
    components: {
        EmojiText,
        Reply,
        Loading
    }
}
</script>

<style lang="scss" scoped>
/* 封面图下移效果 */
@keyframes slidedown {
    0% {
        opacity: 0.3;
        transform: translateY(-60px);
    }

    100% {
        opacity: 1;
        transform: translateY(0px);
    }
}


.slidedown {
    animation: slidedown 1s;
}

/* 内容上移效果 */
@keyframes slideup {
    0% {
        opacity: 0.3;
        transform: translateY(60px);
    }

    100% {
        opacity: 1;
        transform: translateY(0px);
    }
}

.slideup {
    animation: slideup 1s;
}

.banner {
    height: 400px;
    background-size: cover;
    background-position: center;
    position: relative;
    color: #eee;

    .banner-content {
        position: absolute;
        bottom: 25%;
        width: 100%;
        text-align: center;
        text-shadow: 0.05rem 0.05rem 0.1rem rgb(0 0 0 / 30%);

        height: 108px;
        font-size: 30px;
        letter-spacing: 0.3em;

    }
}

textarea {
    outline: none;
    border: none;
    background: #f1f2f3;
    resize: none;
    border-radius: 8px;
    padding: 10px 10px;
    font-size: 16px;
    color: #333333;
}

.height80 {
    height: 80px !important;
}

.comment-wrapper {
    // border: 1px solid red;
    max-width: 1000px;
    background: #fff;
    border-radius: 10px;

    color: #90949e;

    .comment-header {
        font-size: 20px;
        font-weight: bold;
        color: #333333;
        padding: 0 20px;
        margin-bottom: 20px;
        display: flex;
        align-items: center;

        i {
            color: #90949e;
            margin-right: 5px;
            font-size: 20px;
        }
    }

    .loading-area {
        .loading-effect {
            height: 50px;
            // border: 1px solid red;
            text-align: center;

            &>div {
                width: 100%;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .loading-animation {
                position: relative;
            }
        }

        .bottom-line {
            height: 40px;
            text-align: center;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            // border: 1px solid red;

            span {
                padding: 0 12px;
                background-color: #fff;
                z-index: 1;
            }

            &::before {
                content: '';
                position: absolute;
                width: 100%;
                border-bottom: 1px dashed #ccc;
                top: 20px;
                left: 0;
            }
        }
    }



}
</style>